<template>
  <div class="baomin">
    <!-- [title为标题] [xs为 1就是返回按钮 为空是不显示(xs为1,fh就必须为1)] 
    [icon 空为没有 有就显示图标 el-icon-s-operation][bgcolor 1为白色背景 空为透明]
    [fh 有返回,fh=1;有图标,fh=2]-->
    <Head title="活动报名" xs="1" fh="1" icon="" bgcolor="" bg="1" />
    <div class="bgc">
      <span>超过30分钟自动取消，请在{{ min }}分{{ sec }}秒内完成提交</span>
    </div>
    <div class="kapian">
      <div class="kapian-top">
        <span>活动时间</span>
        <span>2021年10月30日 08:00-16:00</span>
      </div>
      <div class="xiangmu">
        <img :src="school.url" alt="" />
        <div>
          <span>{{ school.title }}</span>
          <div>
            <span>团队成员24人</span>
            <span>报名费：￥{{ school.newprice }}</span>
          </div>
        </div>
      </div>
      <div class="min-fot">
        <span>共4个</span>
        <i class="el-icon-arrow-down"></i>
      </div>
      <div class="lxfs">
        <div>
          <span>姓名</span>
          <input type="text" placeholder="请输入名字" v-model="name" />
        </div>
        <div>
          <span>证件号</span>
          <input type="text" placeholder="请输入身份证号" v-model="num" />
        </div>
        <div>
          <span>手机</span>
          <input type="text" placeholder="请输入手机号" v-model="peone" />
        </div>
        <div>
          <span>支付方式</span>
          <select name="" id="">
            <option value="支付宝">支付宝</option>
            <option value="微信">微信</option>
            <option value="银联">银联</option>
          </select>
        </div>
      </div>
    </div>
    <div class="foot">
      <div>
        <span>￥{{ school.newprice }}</span>
        <span>已优惠￥00.00</span>
      </div>
      <div @click="qr" class="but">
        <span>确认提交并支付</span>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "@/components/Fb_body/Head.vue";
export default {
  name: "Baomin",
  components: {
    Head,
  },
  data() {
    return {
      min: 30,
      sec: 0,
      now: "",
      end: "",
      school: [],
      name: "",
      num: "",
      peone: "",

      //   flag: false,
    };
  },
  mounted() {
    // if (this.$store.state.id != 0) {
    this.ajax({
      method: "post",
      url: "/queryAll",
      data: {
        id: 1,
      },
    }).then((res) => {
      this.school = res.data[0];
      console.log(this.school);
    });
    // } else {
    //   this.$router.push({ name: "Home" });
    //   return
    // }
    this.end = new Date().getTime() + 30 * 60 * 1000;
    this.timeDown();
  },
  methods: {
    timeDown() {
      this.now = new Date().getTime();
      if (this.now >= this.end) {
        this.min = 0;
        this.sec = 0;
        alert("已经超时，订单已经取消");
        this.$router.back();
        return;
      }
      // 用结束时间戳减去当前时间
      const msec = this.end - this.now;
      let min = parseInt(msec / 1000 / 60); //算出分钟数
      let sec = parseInt((msec / 1000) % 60); //算出秒数
      // 给数据赋值
      this.min = min > 9 ? min : "0" + min;
      this.sec = sec > 9 ? sec : "0" + sec;
      //定义this指向
      const that = this;
      // 使用定时器 然后使用递归 让每一次函数能调用自己达到倒计时效果
      setTimeout(function () {
        that.timeDown();
      }, 1000);
    },
    qr(){
        // console.log(this.num.match( /^1[345789]\d{9}$/));
        if(this.name==''||this.num==""||this.peone==""){
            return alert("个人信息不能为空");
        }else{
            alert("提交成功,感谢您的购买");
            this.$router.push({name:"Home"});
        }
    }
  },
};
</script>

<style lang="scss" scoped>
.foot {
    position: fixed;
    left: 0;
    bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  >div:nth-of-type(1){
      margin-left: 20px;
      >span{
          &:nth-of-type(1){
              font-size: 25px;
              color: red;
          }
          &:nth-of-type(2){
              margin-left: 10px;
              color: gray;
              font-size: 14px;
          }
      }
  }
  > .but {
    width: 180px;
    font-size: 20px;
    color: white;
    text-align: center;
    line-height: 50px;
    height: 50px;
    background-color: #679ccd;
    cursor: pointer;
  }
}
.lxfs {
  width: 100%;
  margin-top: 10px;
  > div {
    height: 50px;
    border-top: 1px solid rgb(233, 230, 230);
    display: flex;
    justify-content: space-between;
    align-items: center;
    > &:nth-of-type(1) {
      border-top: none;
    }
    > input {
      width: 80%;
      border: none;
      outline: none;
      background-color: rgba(128, 128, 128, 0);
      text-align: right;
    }
    > select {
      border: none;
      background-color: rgba(128, 128, 128, 0);
      width: 70px;
    }
  }
}
.min-fot {
  margin-top: 5px;
  height: 30px;
  line-height: 30px;
  background-color: rgb(235, 235, 235);
  text-align: center;
  color: gray;
}
.xiangmu {
  margin-top: 10px;
  display: flex;
  > img {
    width: 60px;
    height: 60px;
  }
  > div {
    width: 100%;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    > div {
      display: flex;
      justify-content: space-between;
      > span {
        font-size: 13px;
        color: gray;
        &:nth-of-type(2) {
          font-size: 16px;
          font-weight: bold;
          color: #000;
        }
      }
    }
  }
}
.kapian {
  width: 360px;
  height: 380px;
  margin: auto;
  margin-top: 180px;
  background-color: rgb(250, 249, 249);
  border-radius: 5px;
  box-shadow: 0px 0px 10px #6d6b6bb9;
  padding: 10px;
  box-sizing: border-box;
  > .kapian-top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgb(236, 235, 235);
    padding-bottom: 8px;
    > span {
      font-size: 14px;
    }
    > span:nth-of-type(2) {
      color: red;
    }
  }
}
.bgc {
  width: 100%;
  height: 400px;
  background-color: rgb(103, 156, 205);
  position: absolute;
  box-sizing: border-box;
  top: 0;
  z-index: -1;
  //   text-align: center;
  // margin-left: 20px;
  line-height: 400px;
  color: white;
  > span {
    font-size: 15px;
    // width: 80%;
    // margin: auto;
    margin-left: 20px;
  }
}
</style>